<template>
  <el-dropdown class="dropdown_btn" @command="handle">
    <slot></slot>
    <template #dropdown>
      <el-dropdown-menu>
        <template v-for="item in btnList" :key="item.name">
          <el-dropdown-item v-if="!props.shwoBtn.includes(item.command)" :command="item.command">
            <span :class="item.class">{{ item.name }}</span>
          </el-dropdown-item>
        </template>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
  import { defineProps, defineEmits } from 'vue'
  const props = defineProps({
    // 需要隐藏的按钮
    shwoBtn: {
      type: Array,
      default: () => []
    }
  })
  const emit = defineEmits(['submit'])
  const btnList = [
    { name: '写新图文', command: '0', class: 'dropdown' },
    { name: '选择已有图文', command: '1', class: 'dropdown yiyoutuwen' },
    { name: '文字消息', command: '2', class: 'dropdown text' },
    { name: '视频消息', command: '3', class: 'dropdown video' },
    { name: '音频消息', command: '4', class: 'dropdown audio' },
    { name: '图片消息', command: '5', class: 'dropdown img' }
  ]
  const handle = (type: string) => {
    emit('submit', type)
  }
</script>

<style scoped lang="scss">
  .el-dropdown-menu__item {
    padding: 0;
  }
  .dropdown {
    width: 100%;
    padding: 0 20px;
    display: flex;
    align-items: center;

    &::before {
      content: '';
      display: inline-block;
      width: 16px;
      height: 16px;
      background: url('@/assets/content/channelFootage/officialaccountgraphics/xintuwen.png') no-repeat;
      background-size: 100% 100%;
      margin-right: 5px;
    }

    &:hover::before {
      background: url('@/assets/content/channelFootage/officialaccountgraphics/xintuwen_active.png') no-repeat;
    }
  }

  .yiyoutuwen {
    &::before {
      background: url('@/assets/content/channelFootage/officialaccountgraphics/yiyoutuwen.png') no-repeat;
    }

    &:hover::before {
      background: url('@/assets/content/channelFootage/officialaccountgraphics/yiyoutuwen_active.png') no-repeat;
    }
  }

  .text {
    &::before {
      background: url('@/assets/content/channelFootage/officialaccountgraphics/text.png') no-repeat;
    }

    &:hover::before {
      background: url('@/assets/content/channelFootage/officialaccountgraphics/text_active.png') no-repeat;
    }
  }

  .video {
    &::before {
      background: url('@/assets/content/channelFootage/officialaccountgraphics/video.png') no-repeat;
    }

    &:hover::before {
      background: url('@/assets/content/channelFootage/officialaccountgraphics/video_active.png') no-repeat;
    }
  }

  .audio {
    &::before {
      background: url('@/assets/content/channelFootage/officialaccountgraphics/audio.png') no-repeat;
    }

    &:hover::before {
      background: url('@/assets/content/channelFootage/officialaccountgraphics/audio_active.png') no-repeat;
    }
  }

  .img {
    &::before {
      background: url('@/assets/content/channelFootage/officialaccountgraphics/img.png') no-repeat;
    }

    &:hover::before {
      background: url('@/assets/content/channelFootage/officialaccountgraphics/img_active.png') no-repeat;
    }
  }
</style>
